<!--已派单页面-->
<template>
  <div class="main clearfix">
    <!-- 查询 -->
    <section class="section_wrap wrap_te">

      <el-form
        :inline="true"
        style="text-align: left"
        :model="query"
        ref="query"
        class="query clearfix"
      >
        <el-form-item label="关键词:" prop="keyword">
          <el-input
            placeholder="订单号、客户名称、客户手机"
            v-model="query.keyWord"
          ></el-input>
        </el-form-item>
        <el-form-item label="下户人员:" prop="empName">
          <el-input
            placeholder="请输入"
            v-model="query.empName"
          ></el-input>
        </el-form-item>
        <el-form-item label="下户状态:" prop="state">
          <el-select v-model="query.state" placeholder="请选择">
            <el-option
              v-for="item in stateList"
              :key="item.id"
              :label="item.itemText"
              :value="item.itemValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资料准备:" prop="commitStatus">
          <el-select v-model="query.commitStatus" placeholder="请选择">
            <el-option label="准备中"
                       value="0">准备中
            </el-option>
            <el-option label="已备齐"
                       value="1">已备齐
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="button">
          <el-button v-no-more-click type="primary" @click="searchData"
          >搜索
          </el-button
          >
          <el-button type="danger" @click="DataDelete">清空</el-button>
        </el-form-item>
      </el-form>
    </section>
    <section class="section_wrap">
      <el-table
        :data="tableData"
        :inline="true"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="orderNum"
          label="业务单号"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="borrowerName"
          label="客户名称"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="phone"
          label="联系电话"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="address"
          label="客户地区"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="empName"
          label="下户人员"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="stateName"
          label="下户状态"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="commitStatusName"
          label="资料准备"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="appointTime"
          label="指派时间"
          :show-overflow-tooltip="true"
        />  <el-table-column
          prop="note"
          label="备注"
          :show-overflow-tooltip="true"
        />
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              style="color: #45b8ef"
              v-if="scope.row.state!=6"
              @click="getQRCode(scope.row)"
            >生成二维码
            </el-button
            >
            <el-button
              v-if="showRev"
              type="text"
              size="small"
              style="color: #45b8ef"
              @click="toResult(scope.row)"
            >查看
            </el-button
            >
            <el-button
              v-if="Modify"
              type="text"
              size="small"
              style="color: #28b779"
              @click="openDia(scope.row)"
            >修改
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <div class="pagination clearfix">
        <span class="title">小计：共{{ this.total }}条数据</span>
        <el-pagination
          background
          layout="prev, pager, next, sizes"
          :total="total"
          :page-size="query.pagesize"
          :page-sizes="[10, 20, 30, 40, 50]"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </section>
    <!-- 修改弹窗! -->
    <el-dialog
      title="修改已派订单"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="false"
    >
      <div class="surDia">
        <ul>
          <li class="clearfix">
            <span class="l">客户姓名:</span>
            <div class="r">{{ diaData.name }}</div>
          </li>
          <li class="clearfix">
            <span class="l">地址:</span>
            <div class="r">
              {{ diaData.address }}
            </div>
          </li>
          <li class="clearfix">
            <span class="l">手机号:</span>
            <div class="r">
              {{ diaData.phone }}
            </div>
          </li>
          <li class="clearfix">
            <span class="l">订单号:</span>
            <div class="r">
              {{ diaData.orderNum }}
            </div>
          </li>
          <li class="clearfix">
            <span class="l">选择派单角色</span>
            <div class="r t">
              <el-select
                v-model="roListId"
                size="small"
                @change="choseRoleId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in diaRoList"
                  :key="item.id"
                  :label="item.roleName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </li>
          <li class="clearfix">
            <span class="l">选择派单人员</span>
            <div class="r t">
              <el-select
                v-model="diaData.eid"
                size="small"
                placeholder="请选择"
                @change="changeRole"
              >
                <el-option
                  v-for="item in RoleList"
                  :key="item.id"
                  :label="item.empName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="send">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  surveyExistPage,
  getSurveyRole,
  getSurRole,
  determine,
  Modify,
  getPermType,
  getQrCode
} from "../../../src/assets/js/api";
import { checkPermiss } from "../../assets/js/utlis";

export default {
  data() {
    return {
      query: {
        pagesize: 10,
        pageNo: 1,
        keyWord: "",
        empName: "",
        state: "",
        commitStatus: ""
      },
      stateList: [],
      tableData: [],
      pages: 0,
      pageNum: 0,
      total: 0,
      currentPage: 1,
      golbalPermissions: [],
      dialogVisible: false,
      roListId: null,
      diaRoList: [],
      RoleList: [],
      diaData: {
        orderNum: null,
        address: null,
        eid: null,
        name: null,
        phone: null,
        empName: null,
        id: null,
        la: null,
        lo: null,
        state: null
      },
      ModifyData: {
        orderNum: null,
        address: null,
        eid: null,
        name: null,
        phone: null,
        empName: null,
        id: null,
        la: null,
        lo: null,
        state: null
      }
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.getList();
    this.getStateList();
  },
  computed: {
    //查看按钮
    showRev: function() {
      return checkPermiss("business:survey:byId", this.golbalPermissions);
    },
    //修改按钮!
    Modify: function() {
      return checkPermiss(
        "business:survey:appointByOrderNum",
        this.golbalPermissions
      );
    }
  },
  methods: {
    //生成二维码
    getQRCode(row){
      getQrCode({id:row.id}).then(item=>{
        window.open(item.data)
        // fetch(item.data).then((res) =>
        //   res.blob().then((blob) => {
        //     const a = document.createElement("a"),
        //       url = window.URL.createObjectURL(blob),
        //       filename = "二维码海报";
        //     a.href = url;
        //     a.download = filename;
        //     a.click();
        //     window.URL.revokeObjectURL(url);
        //   })
        // );
      })
    },
    //获取下户状态
    getStateList(){
      getPermType('survey_state').then(res=>{
        this.stateList=res.data;
      })
    },
    //筛选清空按钮!
    DataDelete() {
      this.query.keyWord = "";
      this.query.commitStatus = "";
      this.query.state = "";
      this.query.empName = "";
      this.getList();
    },
    //跳转下户详情页
    // 待放款
    toResult(row) {
      this.$router.push({
        path: "/Index/SurResult",
        query: {
          id: row.id,
          borrowerName: row.borrowerName
        }
      });
    },
    send() {
      if (!this.diaData.eid) {
        this.$message.error("请选择正确的派单人员");
        return;
      }

      this.$confirm("是否确定修改？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.determine();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "再想一想"
          });
        });
    },

    Refresh() {
      this.getList();
    },
    //打开弹窗

    openDia(obj) {
      Modify(obj.orderNum).then((res) => {
        if (res.code == 200) {
          this.dialogVisible = true;
          this.diaData.address = obj.address; //客户所在地区!
          this.diaData.name = obj.borrowerName; //客户名字!
          this.diaData.eid = obj.eid; //下户人员ID!
          this.diaData.empName = obj.empName; //下户人员!
          this.diaData.id = obj.id;
          this.diaData.la = obj.la;
          this.diaData.lo = obj.lo;
          this.diaData.orderNum = obj.orderNum; //订单号!

          this.diaData.phone = obj.phone; //客户电话号码!
          this.diaData.state = obj.state;
          if (this.diaRoList.length) return;
          this.getSurveyRoList();
        }
      });
    },
    //获取下拉角色
    getSurveyRoList() {
      getSurveyRole().then((res) => {
        this.diaRoList = res.data;
      });
    },
    choseRoleId() {
      this.diaData.eid = null;
      this.getRoleList(this.roListId);
    },
    changeRole(id) {
      let f_ById = this.RoleList.find((item) => {
        return item.id == id;
      });
      this.roleName = f_ById.empName;
    },
    //根据下拉角色获取下拉人员
    getRoleList(id) {
      getSurRole(id).then((res) => {
        this.RoleList = res.data;
      });
    },
    //搜索
    searchData() {
      this.query.pageNo = 1;
      this.getList(this.query);
    },
    //获取下户列表
    getList() {
      surveyExistPage(this.query).then((res) => {
        let resData = res.data;
        this.tableData = resData.records;
        this.pages = resData.pages;
        this.pageNum = resData.current;
        this.total = resData.total;
      });
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      let queryData = this.query;
      this.getList(queryData);
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      let queryData = this.query;
      this.getList(queryData);
    },
    determine() {
      determine(this.diaData).then((res) => {
        if (res.code == 200) {
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "修改成功"
          });
          setTimeout(() => {
            //成功后刷新数据
            this.Refresh();
          }, 500);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.query {
  .el-form-item {
    position: relative;
    box-sizing: border-box;
    width: 320px;
    height: 32px;
    margin-bottom: 0;
    padding-left: 110px;
  }

  ::v-deep .el-form-item__label {
    line-height: 32px;

    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 32px;
    text-align: right;
  }

  ::v-deep.el-input__icon,
  ::v-deep.el-range-separator {
    line-height: 24px;
  }

  ::v-deep .el-form-item__content {
    line-height: 32px;
    width: 100%;
  }

  ::v-deep .el-input__inner {
    line-height: 32px;

    height: 32px;
  }

  .button.el-form-item {
    padding-left: 0;
  }

  .button .el-button {
    line-height: 0;

    width: 80px;
    height: 32px;
  }
}

.surDia {
  li {
    padding: 5px 0;
  }

  .l {
    font-size: 16px;
    line-height: 32px;
    float: left;

    width: 120px;
    padding-right: 10px;
    text-align: right;
  }

  .r {
    line-height: 32px;
    float: left;

    width: calc(100% - 130px);
    text-align: left;
  }
}

.pagination {
  ::v-deep .el-pagination {
    position: absolute;
    right: 0;
    margin-top: 20px;
  }

  ::v-deep .el-pagination__total {
    visibility: hidden;
  }

  .title {
    font-family: Microsoft YaHei;
    font-size: 12px;
    font-weight: 400;
    line-height: 21px;

    position: absolute;
    top: 20px;
    left: 0;
    color: rgba(51, 51, 51, 1);
  }
}

::v-deep .query .el-form-item {
  margin-bottom: 20px;
  width: auto;
}
</style>
